<template>
	<view class="wh p10 bf7">
		<view class="coupon">
			<view class="f-1 p10" style="overflow-y: auto;">
				<view class="itemC mb10 bs10" v-for="(item,index) in list" :key="index">
					<view class="ihead bf dfbc p10" style="">
						<view class="">
							<view class="dfa mb5">
								<text class="wei6 pr5 f16" v-if="item.coupon.type==1&&item.coupon.startSwitch==0">
									{{item.coupon.rule.money}}元无门槛
								</text>
								<text class="wei6 pr5 f16" v-if="item.coupon.type==2||item.coupon.type==3">
									{{item.coupon.name}}
								</text>
								<text class="wei6 pr5 f16" v-if="item.coupon.type==4">
									{{item.coupon.rule.disContent==1?'免配送费':'配送费立减' + item.coupon.rule.money + '元'}}
								</text>
								<u-tag v-if="item.coupon.type==1" text="代金券" type="primary" size="mini" plain></u-tag>
								<u-tag v-if="item.coupon.type==2" text="折扣券" type="success" size="mini" plain></u-tag>
								<u-tag v-if="item.coupon.type==3" text="兑换券" type="error" size="mini" plain></u-tag>
								<u-tag v-if="item.coupon.type==4" text="运费券" type="warning" size="mini" plain></u-tag>
							</view>
							<view class="c6 f12 mb5" v-if="item.coupon.period&&item.coupon.period.type==1">
								有效期：{{dateFormat(item.coupon.period.timeArr.startTime)}}~{{dateFormat(item.coupon.period.timeArr.endTime)}}
							</view>
							<view class="c6 f12 mb5" v-if="item.coupon.period&&item.coupon.period.type==2">
								获得券{{item.coupon.period.day.type==1?'当日':'次日'}}开始
								{{item.coupon.period.day.value}}个自然日内有效
							</view>
							<view class="c6 f12 mb5" v-if="item.coupon.period&&item.coupon.period.type==3">
								获得券{{item.coupon.period.hours.type==1?'当日':'次日'}}开始{{item.coupon.period.hours.value}}个自然日内有效
							</view>
						</view>
						<view class="cf5 f24 tac">
							<view class="wei6"
								v-if="item.coupon.type==1||(item.coupon.type==4&&item.coupon.rule.disContent==3)">
								<text class="f16">￥</text>{{item.coupon.rule.money}}
							</view>
							<view class="wei6" v-if="item.coupon.type==2">
								{{item.coupon.rule.discount}}<text class="f16">折</text>
							</view>
							<view class="cf5 pt5 f14" v-if="item.coupon.type!==3&&item.coupon.startSwitch==1">
								每满{{item.coupon.startMoney}}元可用</view>
							<view class="cf5 pt5 f12" v-if="item.coupon.type!==3&&item.coupon.startSwitch==0">
								无门槛</view>
							<view class="cf5 pt5 f14" v-if="item.coupon.type==3">
								{{item.coupon.rule.disType==1?'优惠最高价格商品':'优惠最低价格商品'}}
							</view>
						</view>
					</view>
					<view class="lr"></view>
					<view class="rr"></view>
					<view class="icenter bf"></view>
					<view class="dfbc bf p10">
						<view class="c9 f12" style="display: inline-flex;align-items:center;" @click="toEdit(item)">
							<text>使用规则</text><u-icon name="arrow-right" color="#666" size="13"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<editCoupon ref="editCouponRef"></editCoupon>
	</view>
</template>

<script>
	import editCoupon from './components/editCoupon.vue';
	export default {
		components: {
			editCoupon
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				id: "",
				list: [],
			}
		},
		onLoad(options) {
			this.id = options && options.id ? options.id : '';
			this.fetchData()
		},
		methods: {
			async fetchData() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: `${this.api.getVerification}?userId=${this.id}`,
					data: {
						pageNo: 1,
						pageSize: 9999
					}
				})
				this.list = list ? list : []
			},
			//详情
			toEdit(item) {
				this.$refs['editCouponRef'].open({
					id: item.coupon.id,
					type: item.coupon.type
				})
			},
			dateFormat(time) {
				var date = new Date(time);
				var year = date.getFullYear();
				var month =
					date.getMonth() + 1 < 10 ?
					"0" + (date.getMonth() + 1) :
					date.getMonth() + 1;
				var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes =
					date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds =
					date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return (
					year + "." + month + "." + day
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.itemC {
			position: relative;

			.icenter {
				margin: 0 auto;
				width: 100%;
				height: 5rpx;
				text-decoration: line-through;
				border-bottom: 3rpx dashed #ddd;
			}

			.lr,
			.rr {
				position: absolute;
				bottom: 58rpx;
				width: 30rpx;
				height: 30rpx;
				background: #f7f7f7;
				border-radius: 50%;
			}

			.lr {
				left: -18rpx;
			}

			.rr {
				right: -18rpx;
			}
		}
	}

	.bottomBox {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 35rpx 35rpx 45rpx;
		width: 100vw;
		box-shadow: 0 0 20rpx 10rpx #ddd;
	}
</style>